<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 360px;
    }
    .title{
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-left: 3px solid red;
      position: relative;
      box-sizing: border-box;
      padding: 0 20px 0 20px;
      font-size: 20px;
      font-weight: 900;
    }
    .title::before{
      content:"";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      top: 15px;
      left: -47px;
      border: 1px solid #970a0a;

    }
    .title::after{
      content:"+";
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      top: 10px;
      right: 30px;
      border: 1px solid #a80d0d;
      line-height: 20px;
      color: #970a0a;
    }
    .active::after{
      content:"-";
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      top: 10px;
      right: 30px;
      border: 1px solid #cf1111;
      line-height: 20px;
      color: #970a0a;
    }
    .shado{
      box-shadow: 2px 2px  2px #999 ;
      margin-bottom: 5px;

    }
    .content{
      border-left: 3px solid red;
      padding: 0 20px 0 20px;
      box-sizing: border-box;
      color: rgb(0, 0, 91);
      height: 0;
      overflow: hidden;
      transition: height 1s ease-out;
    }
    main{
      width: 400px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }
    .box1{
      margin-top: 20px;
      width: 2px;
      background-color: #000;
    }
    .on{
      height: 130px;
    }
  </style>
</head>

<body>
  <div id="app">
    <main>
      <div class="box1">
        
      </div>
      <div class="box">
        <my-son v-for="(item , index) in list" :key="item.username" :name="item.title" :txt="item.content"></my-son>
      </div>
    </main>
  </div>
  <script src="lib/vue.js"></script>
  <script>
    // 子组件
    const mySon = {
      props: {
        name: String,
        txt: String
      },
      data() {
        return {
          flag: false
        }
      },
      template: `<div class="shado">
                  <div class="title" @click="flag = !flag" :class="{active:flag}" @mousedown.prevent>{{name}}</div> 
                  <p class="content"  :class="{on:flag}">{{txt}}</p> 
                 </div>`,
    }

    new Vue({
      el: '#app',
      data() {
        return {
          list: [
            {
              title: '终身误',
              content: '都到是金玉良姻，俺只念木石前盟，空对着山中高士晶莹雪，终不忘世外仙姝寂寞林，叹人间美中不足今方信，纵然是齐眉举案，到底意难平'
            },
            {
              title: '枉凝眉',
              content: '一个是阆苑仙葩，一个是美玉无瑕，若说没奇缘，今生偏又遇着他，若说有奇缘，如何心事终虚化，一个枉自嗟呀，一个空劳牵挂，一个是水中月，一个是镜中花，想眼中能有多少泪珠儿，怎经得秋流到冬尽，春流到夏'

            },
            {
              title: '恨无常',
              content: '喜荣华正好，恨无常又到，眼睁睁把万事全抛，荡悠悠把芳魂消耗，望家乡，路远山高，故向爹娘梦里相寻告，儿命已入黄泉，天伦呵，须要退步抽身早'

            }
          ]
        }
      },
      components: {
        mySon
      }
      
    })
  </script>
</body>

</html>